<template>
	<view>
		<view class="lunbotu">
			<!-- 轮播图 -->
			<cu-custom bgColor="bg-gradual-blue">
				<block slot="lunbotu">个人技能</block>
			</cu-custom>
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" circular="true" previous-margin="20px" next-margin="20px">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="heightFix" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view>
			<!-- title -->
			<text style="font-weight: 700;font-size: 40rpx;margin-left: 30rpx;color:  #808080;">商品简介</text>
			<text style="margin-left: 20rpx;color: #C0C0C0;">——————————————</text>
		</view>

		<view style="position: absolute;top: 480rpx;">
			<view>
				<uni-card class="Card">
					<view>
						<view style="height: 300rpx;">
							<image style="height: 90%;width: 100%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						</view>
						<view>
							<text style="font-size: 30rpx;">商品名称</text><br>
							<text style="color: #ee350b;">200积分</text><br>
							<button class="button3" @click="clickCard">商品详请</button>
						</view>
					</view>
				</uni-card>
				<uni-card class="Card" style="position: absolute;top: 5rpx;left: 360rpx;">
					<view>
						<view style="height: 300rpx;">
							<image style="height: 90%;width: 100%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						</view>
						<view>
							<text style="font-size: 30rpx;">商品名称</text><br>
							<text style="color: #ee350b;">200积分</text><br>
							<button class="button3" @click="clickCard">商品详请</button>
						</view>
					</view>
				</uni-card>
			</view>

			<view style="position: absolute;top: ;">
				<uni-card class="Card">
					<view>
						<view style="height: 300rpx;">
							<image style="height: 90%;width: 100%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						</view>
						<view>
							<text style="font-size: 30rpx;">商品名称</text><br>
							<text style="color: #ee350b;">200积分</text><br>
							<button class="button3" @click="clickCard">商品详请</button>
						</view>
					</view>
				</uni-card>
				<uni-card class="Card" style="position: absolute;top: 5rpx;left: 360rpx;">
					<view>
						<view style="height: 300rpx;">
							<image style="height: 90%;width: 100%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						</view>
						<view>
							<text style="font-size: 30rpx;">商品名称</text><br>
							<text style="color: #ee350b;">200积分</text><br>
							<button class="button3" @click="clickCard">商品详请</button>
						</view>
					</view>
				</uni-card>
			</view>
		</view>

	</view>
</template>

<script scoped>
	export default {
		data() {
			return {

				indicatorDots: true,
				autoplay: true,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长


				info: [{
						content: '',
						url: '../../static/image/voluntary/taiyang.png',
					},
					{
						url: '../../static/image/voluntary/taiyang.png',
					},
					{
						url: '../../static/image/voluntary/xingxing.png',
					}
				],

			}
		},
		onLoad() {

		},
		methods: {
			clickCard() {
				uni.navigateTo({
					url: "./Transaction",
				});
			}

		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.lunbotu {
		/* text-align: center; */
		height: 430rpx;

	}

	.swiper-box {
		/* width: 95%; */
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F0D3C7;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		/* app上运行不显示图片，就需要加下面这行，设置高度 */
		height: 380upx;
	}

	.image {
		/* width: 750rpx; */
		height: 380upx;
		border-radius: 15upx;
	}

	.Card {
		margin-top: 10rpx;
		height: 500rpx;
		width: 280rpx;
	}

	.button3 {
		border-style: none;
		background-color: #ee350b;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 800;
		width: 180rpx;
		height: 70rpx;
	}
</style>
